<template>
  <div class="chart-container">
    <dv-conical-column-chart
      :config="config"
      style="width: 100%; height: 100%"
    />
  </div>
</template>

<script setup name="MyChart1">
import top1 from "@/assets/img/1st.png";
import top2 from "@/assets/img/2st.png";
import top3 from "@/assets/img/3st.png";
import top4 from "@/assets/img/4st.png";
import top5 from "@/assets/img/5st.png";
import top6 from "@/assets/img/6st.png";
import top7 from "@/assets/img/7st.png";
import { reactive } from "vue";

const config = reactive({
  data: [
    {
      name: "重页司",
      value: 55,
    },
    {
      name: "万普隆",
      value: 120,
    },
    {
      name: "浙江油田",
      value: 71,
    },
    {
      name: "四川",
      value: 66,
    },
    {
      name: "西安",
      value: 80,
    },
    {
      name: "湖北",
      value: 35,
    },
    {
      name: "福建",
      value: 15,
    },
  ],
  img: [top1, top2, top3, top4, top5, top6, top7],
  showValue: true,
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 16px;
}
</style>
